// require('../ProductManager/index.css')
// require('./index.css')

require('./freezeAccount.js');
require('./resetPassword.js');
require('./index.css');
const _user_service = require('../../service/user_service.js');
const _common_util = require('../../util/util_1.js');



const userManager = {
    init: function() {
        this.loadUserData();
        this.bindEvent();
        return this;
    },
    loadUserData: function() {
        // 从localStorage获取用户数据
        const userData = localStorage.getItem('allUsers');
        if (userData) {
            this.renderUserList(JSON.parse(userData));
        } else {
            // 如果没有数据，重新请求
            _user_service.getAllUsers(function(res) {
                if (res.status === 0) {
                    localStorage.setItem('allUsers', JSON.stringify(res.data));
                    userManager.renderUserList(res.data);
                } else {
                    _common_util.errorTips('获取用户列表失败：' + res.message);
                }
            }, function(errMsg) {
                _common_util.errorTips('获取用户列表失败：' + errMsg);
            });
        }
    },
    bindEvent: function() {
        // 绑定标签切换事件
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                const target = this.getAttribute('data-target');
                userManager.switchTab(target);
            });
        });

    },
    switchTab: function(target) {
        // 更新导航栏激活状态
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.remove('active');
        });
        document.querySelector(`[data-target="${target}"]`).classList.add('active');

        // 更新内容区域显示
        document.querySelectorAll('#users-section, #merchants-section').forEach(section => {
            section.style.display = 'none';
        });
        document.getElementById(`${target}-section`).style.display = 'block';
    },
    renderUserList: function(userList) {
        // console.log(userList);
        // 用户模板
        const userTemplate = `
            {{#userList}}
            {{#isUser}}
            <tr>
                <td style="text-align: center;">
                    <span class="{{#isOnline}}status online{{/isOnline}}{{^isOnline}}status offline{{/isOnline}}">
                        {{#isOnline}}🐾 在线{{/isOnline}}{{^isOnline}}💤 离线{{/isOnline}}
                    </span>
                </td>
                <td style="text-align: center;">{{username}}</td>
                <td style="text-align: center;">{{age}}</td>
                <td class="mail-number" style="text-align: center;">{{email}}</td>
                <td style="text-align: center;">
                    <div class="btn-group">
                        {{#isFrozen}}
                        <button class="btn btn-success" onclick="unfreezeAccount({{id}})">🌞 解冻</button>
                        {{/isFrozen}}
                        {{^isFrozen}}
                        <button class="btn btn-freeze" onclick="freezeAccount({{id}})">❄️ 冻结</button>
                        {{/isFrozen}}
                        <button class="btn btn-reset" onclick="resetPassword({{id}})">🔑 重置</button>
                    </div>
                </td>
            </tr>
            {{/isUser}}
            {{/userList}}
        `;

        // 商家模板
        const merchantTemplate = `
            {{#userList}}
            {{#isMerchant}}
            <tr>
                <td style="text-align: center;">
                    <span class="{{#isOnline}}status online{{/isOnline}}{{^isOnline}}status offline{{/isOnline}}">
                        {{#isOnline}}🐾 在线{{/isOnline}}{{^isOnline}}💤 离线{{/isOnline}}
                    </span>
                </td>
                <td style="text-align: center;">{{username}}</td>
                <td style="text-align: center;">
                    <div class="rating-stars">{{merchantCredit}}</div>
                </td>
                <td class="mail-number" style="text-align: center;">{{email}}</td>
                <td style="text-align: center;">
                    <div class="btn-group">
                        {{#isFrozen}}
                        <button class="btn btn-success" onclick="unfreezeAccount({{id}})">🌞 解冻</button>
                        {{/isFrozen}}
                        {{^isFrozen}}
                        <button class="btn btn-freeze" onclick="freezeAccount({{id}})">❄️ 冻结</button>
                        {{/isFrozen}}
                        <button class="btn btn-reset" onclick="resetPassword({{id}})">🔑 重置</button>
                    </div>
                </td>
            </tr>
            {{/isMerchant}}
            {{/userList}}
        `;

         // 处理数据，添加辅助属性
        const processedData = userList.map(user => ({
            ...user,
            isUser:     user.responsibility === 'user',
            isMerchant: user.responsibility === 'merchant',
            isOnline:   !!user.online,   // 原来是 user._online
            isFrozen:   !!user.frozen    // 原来是 user._frozen
        }));

        // 渲染用户列表
        const userHtml = _common_util.renderHTML(userTemplate, { userList: processedData });
        document.querySelector('#users-section tbody').innerHTML = userHtml;

        // 渲染商家列表
        const merchantHtml = _common_util.renderHTML(merchantTemplate, { userList: processedData });
        document.querySelector('#merchants-section tbody').innerHTML = merchantHtml;
    }
};

$(function() {
    userManager.init();
}); 

window.userManager = userManager; // 将userManager暴露到全局作用域